<template>
  <div>
    <div class="content">
      <div @wheel="goWheel">
        <el-carousel
          height="560px"
          direction="vertical"
          indicator-position="none"
          :autoplay="false"
          trigger="click"
          arrow="always"
          @change="changeVideo"
          ref="swiper"
        >
          <el-carousel-item v-for="(item, index) in urlList" :key="index">
            <!-- <h3 class="medium">{{ item }}</h3> -->
            <div class="videoPlayer">
              <!-- <div>{{ item.Url }}</div> -->
              <xg-player :video="item" @triggerEvent="triggerEvent">
              </xg-player>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="shift">
        <el-button
          @click.native="toUp()"
          icon="el-icon-arrow-up"
          :disabled="upDisabled"
        ></el-button>
        <el-button
          @click.native="toDown()"
          icon="el-icon-arrow-down"
        ></el-button>
      </div>
    </div>
  </div>
</template>
    <script>
import XgPlayer from "@/components/xgPlayer";
import api from "@api/index";
export default {
  directives: {},
  // 注册组件
  components: {
    XgPlayer,
  },
  data() {
    return {
      // windowHeight: document.documentElement.clientHeight - 100 + "px", //实时屏幕高度
      urlList: [],
      one: true,
      upDisabled: true,
    };
  },
  mounted() {
    // console.log(this.windowHeight);
    this.getUrl();
    console.log(1);
  },
  methods: {
    getUrl() {
      this.loading = true;
      api.video().then(
        (res) => {
          console.log(res);
          this.urlList = res.data;
          console.log(this.urlList);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 监听到子组件传过来的播放状态 true是播放 false是暂停
    triggerEvent(value) {
      console.log("是否播放：", value);
    },
    changeVideo(index) {
      this.currIndex = index;
      if (index == 0) {
        this.upDisabled = true;
      } else {
        this.upDisabled = false;
      }
      console.log(index);
      if (index == 9) {
        console.log(10000);
        this.urlList = [];
        this.getUrl();
      }
    },
    goWheel() {
      if (event.deltaY > 0 && this.one == true) {
        //data中定义one为true 当one为true时执行
        this.$refs.swiper.next(); //以此来控制每次轮播图切换的张数
        this.one = false;
        setTimeout(() => {
          this.one = true;
        }, 1000);
      }

      if (event.deltaY < 0 && this.one == true) {
        this.$refs.swiper.prev();
        this.one = false;
        setTimeout(() => {
          this.one = true;
        }, 1000);
      }
    },
    toUp() {
      console.log(1);
      this.$refs.swiper.prev();
      this.one = false;
      setTimeout(() => {
        this.one = true;
      }, 1000);
    },
    toDown() {
      this.$refs.swiper.next(); //以此来控制每次轮播图切换的张数
      this.one = false;
      setTimeout(() => {
        this.one = true;
      }, 1000);
    },
  },
};
</script>
    <style scoped>
.videoPlayer {
  height: 800px;
  width: 1100px;
  margin: 0 auto;
}

/* ================================== */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item {
  /* background-color: #d3dce6; */
}
.content {
  position: relative;
}
.shift {
  height: 100px;
  width: 50px;
  border-radius: 25px;
  overflow: hidden;
  background-color: rgba(125, 125, 126, 0.4);
  position: absolute;
  bottom: 40%;
  right: 30px;
  display: flex; /* 将按钮组合成一个Flex容器 */
  flex-direction: column;
  justify-content: center; /* 沿着主轴方向居中对齐 */
  align-items: center; /* 沿着交叉轴方向居中对齐 */
}
/deep/.shift .el-button {
  border: 0;
  margin: 0 10px; /* 为每个按钮添加间距 */
  /* width: 50px; */
  text-align: center;
  background-color: transparent;
  color: #fff;
  font-size: 18px;
  /* padding: 6px; */
  /* width: 70%; */
  height: 50%;
  /* position: absolute; */
  z-index: 100;
}

/deep/.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  color: #6f7072;
}
</style>
    
    